<template>
  <div class="content-wrapper">
    <div class="content-container">
      <div>
        <el-page-header
          v-if="title.length > 0"
          class="my-header"
          :content="title"
          @back="goBack"
        />
        <!-- <div  class="filter-container">
          <span class="filter-item filter-item-label">批量操作 </span>
          <el-button
            size="mini"
            round
            class="filter-item"
            @click="batchDownload"
          >下载<i
            class="el-icon-download el-icon--right button-icon blue-color"
          /></el-button> -->
      </div>
      <el-table
        v-if="list"
        ref="tableData"
        v-loading="listLoading"
        class="tabel"
        height="650"
        :data="
          list.filter(
            (data) =>
              !search ||
              data.documentName.toLowerCase().includes(search.toLowerCase())
          )
        "
        highlight-current-row
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" fixed /> -->
        <el-table-column label="名称" min-width="200">
          <template slot-scope="scope">
            <span
              v-if="scope.row.folderName"
              style="cursor: pointer"
              @click="childFile(scope.row)"
              ><svg class="icon" aria-hidden="true">
                <use :xlink:href="iconType(scope.row.fileExtension).class" />
              </svg>
              {{ scope.row.folderName }}</span
            >
            <span v-if="scope.row.documentName"
              ><svg class="icon" aria-hidden="true">
                <use
                  :xlink:href="iconType(scope.row.fileExtension).class"
                /></svg
              >{{ scope.row.documentName }}{{ scope.row.fileExtension }}
            </span>
          </template>
          <template slot="header" slot-scope="scope">
            <el-input v-model="search" size="mini" placeholder="输入名称搜索" />
          </template>
        </el-table-column>
        <el-table-column
          label="文件编号"
          sortable
          prop="documentCode"
          width="250px"
        />
        <el-table-column
          label="创建人"
          sortable
          prop="createdName"
          width="150px"
        />
        <el-table-column
          sortable
          label="最近使用时间"
          prop="accessTimeString"
          width="200px"
          align="center"
        />
        <el-table-column label="大小" sortable prop="size" width="100px" />
        <el-table-column
          label="操作"
          align="center"
          width="120px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-row>
              <el-col :span="24">
                <el-dropdown trigger="click" class="filter-item">
                  <el-button type="text" class="el-icon-more" />
                  <el-dropdown-menu slot="dropdown" class="user-dropdown">
                    <el-dropdown-item
                      v-if="scope.row.documentName"
                      @click.native="viewDocument(scope.row, 'view')"
                      >预览</el-dropdown-item
                    >

                    <el-dropdown-item
                      v-if="scope.row.documentId"
                      @click.native="viewDocument(scope.row, 'edit')"
                      >编辑*</el-dropdown-item
                    >

                    <el-dropdown-item
                      v-if="scope.row.documentId"
                      @click.native="fileDownload(scope.row)"
                      >下载</el-dropdown-item
                    >

                    <el-dropdown-item
                      v-if="scope.row.documentId"
                      @click.native="deleteDownload(scope.row)"
                      >删除*</el-dropdown-item
                    >

                    <el-dropdown-item
                      v-if="scope.row.documentId"
                      @click.native="coverDownload(scope.row)"
                      >替换*</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <UploadingFile
      :uploading-file-data="UploadingFileData"
      @uploadingdata="uploadingdata"
    />
  </div>
</template>

<script>
// import Pagination from '@/components/Pagination'
import { unity } from '@/styles/js/setIconType.js'
import { listFolder } from '@/api/fd/folder'
import { downloadFile } from '@/api/fd/document'
import UploadingFile from '@/views/flow/components/UploadingFile'

export default {
  components: { UploadingFile },
  data() {
    return {
      iconType: unity.setIconType,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10
        // flowType: null,
        // documentCode: null
      },
      temp: {
        parentFolderId: null,
        folderName: null,
        folderId: null,
        repositoryId: 1
      },
      list: null,
      total: 0,
      listLoading: true,
      input: '',
      dialogVisible: false,
      search: '',
      title: '',
      multipleSelection: [],
      UploadingFileData: {}
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    //   分页处理
    getList() {
      listFolder(this.temp).then((res) => {
        this.list = res.data
        this.listLoading = false
      })
    },
    childFile(row) {
      this.title = row.folderName
      this.temp.parentFolderId = Number(row.folderId)
      this.getList()
    },
    handleFilter() {},
    // edit
    openDocument(id) {
      window.open(
        'onlyoffice/createDocument.html?&token=' +
          this.$store.getters.token +
          '&documentId=' +
          id +
          '&mode=edit' +
          '&urldata=' +
          process.env.VUE_APP_BASE_API
      )
    },
    goBack() {
      this.temp = this.$options.data().temp
      console.log(this.temp, 'oooo')
      this.title = ''
      this.getList()
    },
    viewDocument(row, mode) {
      console.log(row, '73737')
      if (row.documentType !== 4) {
        window.open(
          'onlyoffice/createDocument.html?&token=' +
            this.$store.getters.token +
            '&documentId=' +
            row.documentId +
            '&mode=' +
            mode +
            '&urldata=' +
            process.env.VUE_APP_BASE_API
        )
      } else {
        window.open(
          process.env.VUE_APP_BASE_API +
            '/api/fd/pdf/get_document_by_pdf?documentId=' +
            row.documentId
        )
      }
    },
    // 下载功能
    fileDownload(row) {
      downloadFile({
        documentId: row.documentId
      }).then((res) => {
        const { url, documentName } = res.data
        this.getBlob(url).then((blob) => {
          this.saveAs(blob, documentName)
        })
      })
    },
    // 下载重命名
    getBlob(url) {
      return new Promise((resolve) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.responseType = 'blob'
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response)
          }
        }

        xhr.send()
      })
    },
    // 下载重命名
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename)
      } else {
        const link = document.createElement('a')
        const body = document.querySelector('body')

        link.href = window.URL.createObjectURL(blob)
        link.download = filename
        link.style.display = 'none'
        body.appendChild(link)
        link.click()
        body.removeChild(link)
        window.URL.revokeObjectURL(link.href)
        this.a = this.a + 1
        console.log(this.a)
      }
    },
    batchDownload() {
      this.batchType = 1
      if (this.multipleSelection.length > 0) {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          ;((t, data) => {
            setTimeout(() => {
              this.fileDownload(data)
            }, 1000 * t) // 每秒执行一次
          })(i, this.multipleSelection[i])
        }
      } else {
        this.$message.warning('请选择下载文件')
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteDownload(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    coverDownload(row) {
      this.$confirm('此操作将替换该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 替换的操作
          this.UploadingFileData = {
            deleteDialog: true,
            // value: '',
            // documentItem: isType === 2 ? row.documentCode : row.documentId,
            // documentId: row.documentId,
            // index: index,
            // type: isType,
            // level: row.documentLevel
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 文件上传
    uploadingdata(data) {
      const { row, update } = data
      // const newTemp = Array.from(this.ruleForms.temp)
      // newTemp[row.index].modeDocumentName = update[0].documentName
      // newTemp[row.index].documentId = update[0].documentId
      // this.ruleForms.temp = newTemp
    }
  }
}
</script>

<style scope >
.filter-container {
  padding-top: 5px;
}
</style>
